let demo = document.querySelector("#demo");  //读取demo元素
let style=document.querySelector("#style")
let n = -1;
let string=`
/*你好，我是一个前端新人，
接下来我要加样式了,
请看*/    
body{
    color:red;
}`
let string2=''  //string文字部分注释起来，才能被CSS样式识别
let step = () => {
    setTimeout(() => {
        n = n + 1;
        if(string[n]==='\n')
        {
            string2=string2+'<br>';}   //可以写成string2+='<br>'
        else if(string[n]===" "){
            string2+="&nbsp";
        }
        else{
            string2=string2+string[n];}
        demo.innerHTML =string2;    //从string[0]到string[n-1]
        style.innerHTML =string.substring(0,n);    //写样式，若用string2会有&nbsp，css样式无法读取
        if (n+1<string.length) { step(); }
    }, 100)
}
step();